<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HiRoom! - Đăng ký tài khoản</title>
<script type='text/javascript' src='js/jquery-2.1.1.js'></script>
<script type='text/javascript' src='apps/confirm/jquery.hs_confirm.js'></script>
<link rel='stylesheet' type='text/css'
	href='apps/confirm/hs_confirm.css' />
<link rel='stylesheet' type='text/css' href='css/style.css' />
<link rel='stylesheet' type='text/css' href='css/reg.css' />
<script type='text/javascript'>
	$(document)
			.ready(
					function(e) {
						$('#rules')
								.openDialog(
										{
											title : 'Quy định diễn đàn',
											text : "<h4>1. Tên tài khoản:</h4><ul><li>Cho phép có khoảng trắng giữa các từ</li><li>Cho phép dùng tiếng Việt có dấu</li><li class='impotant'>Không được chứa các kí tự đặc biệt</li><li class='impotant'>Độ dài tối thiểu 3 kí tự, tối đa 250 kí tự</li></ul><h4>2. Mật khẩu tài khoản:</h4><ul><li>Nên bao gồm chữ số, các kí tự đặc biệt, chữ hoa và chữ thường</li><li>Không nên đặt các mật khẩu dễ đoán như tên, sinh nhật...</li><li class='impotant'>Độ dài tối thiểu là 6 tối đa 250 kí tự</li></ul>",
											confirmText : 'Đồng ý',
											warning : true,
											color : '#5A5AFF',
											border : 'solid #5A5AFF'
										});
						/*add nof*/
						function addNof(col, text) {
							if (col.find('.nof').length == 0) {
								col
										.append("<div class='nof'><div class='node'></div>"
												+ text + "</div>");
								col.find('.nof').fadeIn(900);
							} else {
								col.find('.nof').fadeOut(100, function() {
									$(this).text(text)
								}).delay(50).slideDown(200);
							}
						}
						/*remove nof*/
						function removeNof(nof) {
							nof.fadeOut(900).remove();
						}
						/*checkpass*/
						function checkPass() {
							if ($('#password').val().length < 6) {
								addNof($('#password').parent(),
										'Mật khẩu phải nhiều hơn 6 kí tự');
							} else {
								removeNof($('#password').parent().find('.nof'));
								return true;
							}
							return false;
						}
						/*check password*/
						$('#password').blur(function() {
							checkPass();
						});
						/*repass*/
						function rePass() {
							if ($('#password').val().length != 0) {
								if ($('#repassword').val() != $('#password')
										.val()) {
									addNof($('#repassword').parent(),
											'Mật khẩu không trùng khớp');
								} else {
									removeNof($('#repassword').parent().find(
											'.nof'));
									return true;
								}
							} else {
								addNof($('#password').parent(),
										'Chưa nhập mật khẩu');
							}
							return false;
						}
						/*check pass valid*/
						$('#repassword').blur(function() {
							rePass();
						});
						/*reset value*/
						$('#btnReset').click(function(e) {
							removeNof($('.nof'));
						});
						/*check username*/
						function checkUsername() {
							var username = $('#username').val();
							if (username.length == 0) {
								addNof($('#username').parent(),
										'Chưa nhập tên tài khoản');
							} else {
								$
										.ajax(
												{
													url : 'registerservlet?cmd=check',
													type : 'POST',
													dataType : 'text',
													data : {
														username : username
													},
													success : function(data) {
														if (data == 'true') {
															addNof(
																	$(
																			'#username')
																			.parent(),
																	'Tên tài khoản đã có người sử dụng');
														} else {
															removeNof($(
																	'#username')
																	.parent()
																	.find(
																			$('.nof')));
														}
													},
													error : function() {
														console
																.log('Lỗi tek le');
													}
												}).fail(function() {
											alert('Không thể gửi dữ liệu');
										});
							}
						}

						/*ajax check user name*/
						$('#username').blur(function() {
							checkUsername();
						});
						/**/
						$('#checkbox').click(
								function() {
									$('#submit').prop('disabled',
											!$('#checkbox').is(':checked'));
								});
						/*submit form*/
						$('#form').submit(function() {
							checkUsername();
							checkPass();
							rePass();
							if ($('.nof').length == 0) {
								$.ajax({
									url : $(this).attr('action'),
									type : $(this).attr('method'),
									datatype : 'text',
									data : $(this).serialize(),
									error : function(data) {
										$.openDialog({
											title : 'Lỗi',
											text : data,
											warning : true,
											confirmText : 'Đồng ý'
										});
									}
								});
							}
							return false;
						});
					});
</script>
<style type='text/css'>
table tr td {
	position: relative;
}

.nof {
	display: none;
	position: absolute;
	top: 0;
	width: 110%;
	left: 110%;
	padding: 5px 18px;
	z-index: 99;
	background: #FF4A4A;
	opacity: 0.7;
	border-radius: 3px;
	border: none;
	text-align: left;
}

.nof .node {
	position: absolute;
	left: -9px;
	margin-top: 3px;
	width: 0;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-right: 9px solid #FF4A4A;
}
</style>
</head>

<body>
	<h1>Chào mừng bạn đến với HiRoom!</h1>
	<h3>Đăng ký tài khoản giúp bạn có thể tham gia thảo luận và giải
		đáp thắc mắc dễ dàng hơn</h3>
	<div id='main'>
		<fieldset>
			<form id='form' action='registerservlet?cmd=reg' method='post'>
				<table id='reg_table'>
					<tr>
						<td>Tài khoản</td>
						<td colspan='3'><input id='username' class='text' type='text'
							name='username' placeholder='Tên đăng nhập' /> <!-- <div class='nof'>
								<div class='node'></div>
							</div> --></td>
					</tr>
					<tr>
						<td>Mật khẩu</td>
						<td colspan='3'><input id='password' class='text'
							type='password' name='password' placeholder='Nhập mật khẩu' /></td>
					</tr>
					<tr>
						<td>Xác nhận</td>
						<td colspan='3'><input id='repassword' class='text'
							type='password' name='repassword' placeholder='Nhập lại mật khẩu' />
							<!-- <div class='nof'>
								<div class='node'></div>
							</div> --></td>
					</tr>
					<tr>
						<td>Giới tính:</td>
						<td colspan='3'><select id='sex' class='text' name='sex'>
								<option value='Chưa xác định'>Chưa xác định</option>
								<option value='Nam'>Nam</option>
								<option value='Nữ'>Nữ</option>
						</select></td>
					</tr>
					<tr>
						<td>Sinh nhật:</td>
						<td><select name='day' id='day' class='text'>
								<option disabled>Ngày</option>
								<c:forEach var="i" begin="1" end="31">
									<option>${i}</option>
								</c:forEach>
						</select></td>
						<td><select name='month' id='month' class='text'>
								<option disabled>Tháng</option>
								<c:forEach var="i" begin="1" end="12">
									<option>${i}</option>
								</c:forEach>
						</select></td>
						<td><select name='year' id='year' class='text'>
								<option disabled>Năm</option>
								<c:forEach var="i" begin="1990" end="2000">
									<option>${i}</option>
								</c:forEach>
						</select></td>
					</tr>
					<tr>
						<td colspan="4"><label for='checkbox'> <input
								type='checkbox' id='checkbox' /> Tôi đồng ý với các <a href='#'
								id='rules'>quy định</a> của diễn đàn
						</label></td>
					</tr>
				</table>
				<div id='func'>
					<div>
						<img src='images/separator.png'>
						<button id="submit" disabled="disabled" type='submit'
							value='Đăng nhập' class='button'>Xác nhận</button>
						<button id='btnReset' type='reset' value='Đăng ký' class='button'>Nhập
							lại</button>
					</div>
				</div>
			</form>
		</fieldset>
	</div>
</body>
</html>